<template>
  <div
    class="subComments_wrap"
    :class="{ alernateAni: alernateAni }"
    ref="subComments"
    style=""
  >
    <div class="title">
      <p>回复（{{ replyList.length }}）</p>
    </div>
    <div>
      <UserItem
        :item="item"
        v-for="item in myReplyList"
        :key="item.beRepliedCommentId"
      />
    </div>
  </div>
</template>

<script>
import UserItem from "../components/User-item";
export default {
  props: ["replyList"],
  components: {
    UserItem,
  },
  data() {
    return {
      myReplyList: this.replyList,
      alernateAni: false,
    };
  },
  mounted() {
    console.log("123213213");
    console.log(this.myReplyList);
  },
  methods: {
    changeAlternateAni() {
      this.alernateAni = !this.alernateAni;
    },
  },
};
</script>

<style lang="less" scoped>
.subComments_wrap {
  position: absolute;
  top: 3rem;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  border-radius: 0.3rem 0.3rem 0 0;
  padding-top: 0.4rem;
  background: #fff;
  //   transition: 0.35s transform ;
  animation: showUp 0.35s both linear;
  .title {
    text-align: center;
    font-size: 0.4rem;
    font-weight: bold;
  }
}
.alernateAni {
  animation: showDown 0.35s both linear !important;
  animation-fill-mode: none !important;
}
@keyframes showUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes showDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
</style>